<c:if test="${sessionBean.ejbSession.owner==null}" >
    <jsp:forward page="../login.jsp" />
</c:if>
<c:if test="${sessionBean.ejbSession.personal==null}" >
    <jsp:forward page="../user/homeUser.jsp" />
</c:if>
<script language="JavaScript">
function contar() {
  n = document.getElementById("editPostingForm:description").value.length;
  if (n > 20000) {
    document.getElementById("editPostingForm:description").value = document.getElementById("editPostingForm:description").value.substring(0, 20000);
  }
  else {
    document.getElementById("editPostingForm:contador").value = 20000-n;
  }
}
</script>
<style>
    .rich-table-cell {
        border: 0px;
    }
</style>
<f:view>
    <h:outputText value="Edit Personal Posting in #{personalBean.personal.site.site}" style="font-size: 20px; font-weight: bold;"/>
    <h:form id="editPostingForm">
    <h:panelGrid>
    <rich:panel>
        <h:messages globalOnly="true" style="color: red" styleClass="errorMessage"/>
        <h:panelGrid columns="3">
            <h:outputText value="I am / We are:" />
            <h:panelGroup>
            <h:selectOneMenu id="am" value="#{personalBean.personal.am}" >
                <f:selectItem
                    itemValue="a"
                    itemLabel="anonymous"/>
                <f:selectItem
                    itemValue="m"
                    itemLabel="a men"/>
                <f:selectItem
                    itemValue="w"
                    itemLabel="a women"/>
                <f:selectItem
                    itemValue="t"
                    itemLabel="someone TG/TS/TV"/>
                <f:selectItem
                    itemValue="mw"
                    itemLabel="a men and women"/>
                <f:selectItem
                    itemValue="mm"
                    itemLabel="a group of men"/>
                <f:selectItem
                    itemValue="ww"
                    itemLabel="a group of women"/>
            </h:selectOneMenu>
            <h:outputText value=" Seeking:" />
            <h:selectOneMenu id="seeking" value="#{personalBean.personal.seeking}" >
                <f:selectItem
                    itemValue=""
                    itemLabel="null"/>
                <f:selectItem
                    itemValue="m"
                    itemLabel="a men"/>
                <f:selectItem
                    itemValue="w"
                    itemLabel="a women"/>
                <f:selectItem
                    itemValue="t"
                    itemLabel="someone TG/TS/TV"/>
                <f:selectItem
                    itemValue="mw"
                    itemLabel="a men and women"/>
                <f:selectItem
                    itemValue="mm"
                    itemLabel="a group of men"/>
                <f:selectItem
                    itemValue="ww"
                    itemLabel="a group of women"/>
            </h:selectOneMenu>
            </h:panelGroup>
            <h:message for="seeking" />
            
            <h:outputText value="(*) Title:"/>
            <h:inputText id="title" maxlength="100" value="#{personalBean.personal.title}" size="70" required="true" requiredMessage="This is a required field"/>
            <h:message for="title" style="color: red" styleClass="errorMessage"/>
            
            <h:outputText value="Your Age:"/>
            <h:inputText id="age" maxlength="3" value="#{personalBean.searchMinAge}" size="10" converter="integerConverter" converterMessage="the age is not valid" validatorMessage="you must be at least 18 years old" >
                <f:validateLongRange minimum="18" />
            </h:inputText>
            <h:message for="age" style="color: red" styleClass="errorMessage"/>
            
            <c:if test="${!empty personalBean.personal.site.areas}">
            <h:outputText value="Area:" />
            <a4j:region>
            <h:selectOneMenu id="area" value="#{personalBean.areaId}" >
                <c:forEach var="area" items="#{personalBean.personal.site.areas}" >
                    <f:selectItem
                        itemValue="#{area.id}"
                        itemLabel="#{area.area}"/>
                </c:forEach>
                <a4j:support event="onchange" reRender="locationPanel" ajaxSingle="true"/>
            </h:selectOneMenu>
            <a4j:status>
                <f:facet name="start">
                    <h:graphicImage  value="/images/ajax_process.gif"/>
                </f:facet>
            </a4j:status>
            </a4j:region>
            <h:message for="area" />
            </c:if>
            
            <h:outputText value="Specific Location:"/>
            <h:panelGroup id="locationPanel">
            <h:inputText id="location" maxlength="70" value="#{personalBean.personal.location}" size="50" rendered="#{empty personalBean.locationsPersonalArea}"/>
            <h:selectOneMenu id="location1" value="#{personalBean.personal.location}" rendered="#{!empty personalBean.locationsPersonalArea}">
                <c:forEach var="location" items="#{personalBean.locationsPersonalArea}" >
                    <f:selectItem
                        itemValue="#{location.location}"
                        itemLabel="#{location.location}"/>
                </c:forEach>
            </h:selectOneMenu>
            </h:panelGroup>
            <a4j:commandButton id="refreshLocationPanel" style="display: none; visibility: hidden;" reRender="locationPanel" ajaxSingle="true"/>
            
            <h:outputText value="Categorie:" />
            <h:selectOneMenu id="categorie" value="#{personalBean.personalCategorieId}" >
                <c:forEach var="categorie" items="#{adminBean.personalCategories}" >
                    <f:selectItem
                        itemValue="#{categorie.id}"
                        itemLabel="#{categorie.categorie}"/>
                </c:forEach>
            </h:selectOneMenu>
            <h:message for="categorie" />
            
            <h:outputText value="(*) Description:"/>
            <h:inputTextarea id="description" onkeydown="contar()" onkeyup="contar()" value="#{personalBean.personal.description}" rows="7" cols="80" required="true" requiredMessage="This is a required field"/>
            <h:panelGroup><h:inputText id="contador" onkeydown="contar()" onkeyup="contar()" value="#{personalBean.contador}" size="5" /><h:message for="description" style="color: red" styleClass="errorMessage"/></h:panelGroup>
            
            <h:outputText value="(*) Email Address:"/>
            <h:inputText id="email" value="#{personalBean.personal.email}" size="30" readonly="true" />
            <h:message for="email" style="color: red" styleClass="errorMessage"/>
        </h:panelGrid>
        
        <h:panelGrid columns="2">
            <h:outputText value="Images:"/>
            <rich:simpleTogglePanel id="uploadPanel" width="450px" opened="true" label="Manage your Images" switchType="client" >
                <div align="center">
                <rich:fileUpload immediateUpload="true" acceptedTypes="jpg, gif, png, bmp" addControlLabel="Add image..." maxFilesQuantity="#{4-personalBean.itemsSize}" uploadData="#{personalBean.uploadItems}" listHeight="60" autoclear="true" onupload="document.getElementById('editPostingForm:submit').disabled=true; document.getElementById('editPostingForm:preview').disabled=true;" onuploadcanceled="document.getElementById('editPostingForm:submit').disabled=false; document.getElementById('editPostingForm:preview').disabled=false;" ajaxSingle="true" >
                    <f:facet name="label">
                        <h:outputText value="{_KB}KB from {KB}KB uploadedm" />
                    </f:facet>
                    <a4j:support event="onuploadcomplete" oncomplete="document.getElementById('editPostingForm:submit').disabled=false; document.getElementById('editPostingForm:preview').disabled=false;" reRender="imagesPanel" ajaxSingle="true" />
                </rich:fileUpload>
                <h:panelGrid id="imagesPanel">
                <rich:dataGrid value="#{personalBean.uploadItems}" var="item" rowKeyVar="row" columns="2" >
                    <h:panelGrid>
                        <a4j:mediaOutput element="img" mimeType="image/jpg" createContent="#{personalBean.paint}" value="#{row}" cacheable="false" />
                        <a4j:commandLink value="Delete" action="#{personalBean.deleteItem}" reRender="uploadPanel" ajaxSingle="true">
                            <f:setPropertyActionListener target="#{personalBean.row}" value="#{row}" />
                        </a4j:commandLink>
                    </h:panelGrid>
                </rich:dataGrid>
                <a4j:commandLink value="Delete All Items" action="#{personalBean.deleteItems}" reRender="uploadPanel" ajaxSingle="true" rendered="#{personalBean.itemsSize>1}" />
                </h:panelGrid>
                </div>
            </rich:simpleTogglePanel>
            
            <h:outputText value="Permissions:"/>
            <h:panelGrid columns="2">
                <h:selectBooleanCheckbox value="#{personalBean.personal.othersContact}" /><h:outputText value="OK to contact you for other kind of services (commercial, offers, services, etc)."/>
            </h:panelGrid>
        </h:panelGrid>
        <h:panelGrid columns="2" >
            <h:commandButton id="submit" type="submit" value="Update" action="#{personalBean.update}" onclick="if(!confirm('Your Post has been edited. Are you sure?'))return false" />
            <h:commandLink id="preview" value="Preview" action="#{personalBean.previewUpdate}" />
        </h:panelGrid>
    </rich:panel>
    </h:panelGrid>
    </h:form>
    <h:form>
        <h:commandLink value="Back" action="#{personalBean.backEdit}" >
            <f:setPropertyActionListener target="#{sessionBean.ejbSession.personal}" value="#{null}"/>
        </h:commandLink>
    </h:form>
    <rich:separator height="1" />
</f:view>
<script>document.getElementById("editPostingForm:refreshLocationPanel").click();</script>